/*
 * @Descripttion:
 * @version:
 * @Author: chenWeiLong
 * @Date: 2022-02-21 19:44:05
 * @LastEditors: please set LastEditors
 * @LastEditTime: 2022-03-26 19:53:20
 */
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Layout from "@/layout/layout.vue";
export const routes: Array<RouteRecordRaw> = [
  {
    path: "/home",
    name: "Home",
    meta: {
      title: "首页",
      icon: "HomeFilled",
      roles: ["sys:manage"],
      parentId: 0,
    },
    component: () => import("@/views/home/home.vue"),
  },
  {
    path: "/ref",
    name: "Ref",
    meta: {
      title: "ref全家桶",
      icon: "HomeFilled",
    },
    component: Layout,
    redirect: "/ref/ref",
    children: [
      {
        path: "ref",
        component: () => import("@/views/ref/ref.vue"),
        name: "ref",
        meta: {
          title: "ref",
          icon: "Reading",
        },
      },
    ],
  },
  {
    path: "/reactive",
    name: "Reactive",
    meta: {
      title: "Reactive全家桶",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/reactive/reactive",
    children: [
      {
        path: "shallowReactive",
        component: () => import("@/views/reactive/shallowReactive.vue"),
        name: "shallowReactive",
        meta: {
          title: "shallowReactive",
          icon: "Reading",
        },
      },
      {
        path: "reactive",
        component: () => import("@/views/reactive/reactive.vue"),
        name: "reactive",
        meta: {
          title: "reactive",
          icon: "Reading",
        },
      },
      {
        path: "readonly",
        component: () => import("@/views/reactive/readonly.vue"),
        name: "readonly",
        meta: {
          title: "readonly",
          icon: "Reading",
        },
      },
    ],
  },
  {
    path: "/to",
    name: "To",
    meta: {
      title: "To全家桶",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/to/to",
    children: [
      {
        path: "to",
        component: () => import("@/views/to/to.vue"),
        name: "to",
        meta: {
          title: "to",
          icon: "Reading",
        },
      },
    ],
  },
  {
    path: "/computed",
    name: "Computed",
    title: "Computed",
    meta: {
      title: "Computed",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/computed/computed",
    children: [
      {
        path: "computed",
        name: "Computed",
        meta: {
          title: "Computed",
          icon: "Reading",
        },
        component: () => import("@/views/Computed/Computed.vue"),
      },
    ],
  },
  {
    path: "/watch",
    name: "watch",
    meta: {
      title: "watch",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/watch/watch",
    children: [
      {
        path: "watch",
        name: "watch",
        meta: {
          title: "watch",
          icon: "Reading",
        },
        component: () => import("@/views/watch/watch.vue"),
      },
    ],
  },
  {
    path: "/lifecycle",
    name: "lifecycle",
    meta: {
      title: "生命周期",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/lifecycle/lifecycle",
    children: [
      {
        path: "lifecycle",
        name: "lifecycle",
        meta: {
          title: "生命周期",
          icon: "Reading",
        },
        component: () => import("@/views/lifecycle/lifecycle.vue"),
      },
    ],
  },
  {
    path: "/prop",
    name: "prop",
    meta: {
      title: "prop(正向传值)",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/prop/prop",
    children: [
      {
        path: "prop",
        name: "prop",
        meta: {
          title: "prop(正向传值)",
          icon: "Reading",
        },
        component: () => import("@/views/prop/prop.vue"),
      },
    ],
  },
  {
    path: "/component",
    meta: {
      title: "component(动态组件)",
      icon: "Reading",
    },
    name: "component",
    component: Layout,
    redirect: "/component/component",
    children: [
      {
        path: "component",
        name: "component",
        meta: {
          title: "component(动态组件)",
          icon: "Reading",
        },
        component: () => import("@/views/component/index.vue"),
      },
    ],
  },
  {
    path: "/slot",
    name: "slot",
    meta: {
      title: "slot(插槽)",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/slot/slot",
    children: [
      {
        path: "slot",
        name: "slot",
        meta: {
          title: "slot(插槽)",
          icon: "Reading",
        },
        component: () => import("@/views/slot/index.vue"),
      },
    ],
  },
  {
    path: "/async",
    name: "async",
    meta: {
      title: "异步组件",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/async/async",
    children: [
      {
        path: "async",
        name: "async",
        meta: {
          title: "asyncComponent",
          icon: "Reading",
        },
        component: () => import("@/views/async/index.vue"),
      },
    ],
  },
  {
    path: "/teleport",
    name: "teleport",
    meta: {
      title: "teleport(传送门)",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/teleport/teleport",
    children: [
      {
        path: "teleport",
        name: "teleport",
        meta: {
          title: "teleport",
          icon: "Reading",
        },
        component: () => import("@/views/teleport/index.vue"),
      },
    ],
  },
  {
    path: "/transition",
    name: "transition",
    meta: {
      title: "transition(过渡动画)",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/transition/transition",
    children: [
      {
        path: "transition",
        name: "transition",
        meta: {
          title: "transition(过渡动画)",
          icon: "Reading",
        },
        component: () => import("@/views/transition/index.vue"),
      },
      {
        path: "transition1",
        name: "transition1",
        meta: {
          title: "transition(动画函数)",
          icon: "Reading",
        },
        component: () => import("@/views/transition/fn.vue"),
      },
      {
        path: "transition2",
        name: "transition2",
        meta: {
          title: "transitionGroup",
          icon: "Reading",
        },
        component: () => import("@/views/transition/transition_group.vue"),
      },
    ],
  },
  {
    path: "/provide",
    name: "provide",
    meta: {
      title: "provide/inject",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/provide/provide",
    children: [
      {
        path: "provide",
        name: "provide",
        meta: {
          title: "provide",
          icon: "Reading",
        },
        component: () => import("@/views/provide/index.vue"),
      },
    ],
  },
  {
    path: "/eventBus",
    name: "eventBus",
    meta: {
      title: "eventBus",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/eventBus/eventBus",
    children: [
      {
        path: "eventBus",
        name: "eventBus",
        meta: {
          title: "中央事件总线",
          icon: "Reading",
        },
        component: () => import("@/views/bus/index.vue"),
      },
    ],
  },
  {
    path: "/tsx",
    name: "tsx",
    meta: {
      title: "tsx",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/tsx/tsx",
    children: [
      {
        path: "tsx",
        name: "tsx",
        meta: {
          title: "tsx使用",
          icon: "Reading",
        },
        component: () => import("@/views/tsx/tsx.vue"),
      },
    ],
  },
  {
    path: "/vmodel",
    name: "vmodel",
    meta: {
      title: "v-model",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/vmodel/vmodel",
    children: [
      {
        path: "vmodel",
        name: "vmodel",
        meta: {
          title: "v-model",
          icon: "Reading",
        },
        component: () => import("@/views/vModel/index.vue"),
      },
    ],
  },
  {
    path: "/directive",
    name: "directive",
    meta: {
      title: "directive(自定义指令)",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/directive/directive",
    children: [
      {
        path: "directive",
        name: "directive",
        meta: {
          title: "directive",
          icon: "Setting",
        },
        component: () => import("@/views/directive/index.vue"),
      },
      {
        path: "directive1",
        name: "directive1",
        meta: {
          title: "directive(函数简写)",
          icon: "Setting",
        },
        component: () => import("@/views/directive/directive.vue"),
      },
      {
        path: "drag",
        name: "drag",
        meta: {
          title: "拖拽指令",
          icon: "Setting",
        },
        component: () => import("@/views/directive/drag.vue"),
      },
    ],
  },
  {
    path: "/hooks",
    name: "hooks",
    meta: {
      title: "hooks",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/hooks/hooks",
    children: [
      {
        path: "hooks",
        name: "hooks",
        meta: {
          title: "hooks",
          icon: "Setting",
        },
        component: () => import("@/views/hooks/index.vue"),
      },
    ],
  },
  {
    path: "/global",
    name: "global",
    meta: {
      title: "global",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/global/global",
    children: [
      {
        path: "global",
        name: "global",
        meta: {
          title: "global",
          icon: "Setting",
        },
        component: () => import("@/views/globalFn/index.vue"),
      },
    ],
  },
  {
    path: "/loading",
    name: "loading",
    meta: {
      title: "loading",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/loading/loading",
    children: [
      {
        path: "loading",
        name: "loading",
        meta: {
          title: "loading",
          icon: "Setting",
        },
        component: () => import("@/views/plugin/index.vue"),
      },
    ],
  },
  {
    path: "/todo",
    name: "todo",
    meta: {
      title: "todo",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/todo/todo",
    children: [
      {
        path: "todo",
        name: "todo",
        meta: {
          title: "todo",
          icon: "Setting",
        },
        component: () => import("@/views/todo/index.vue"),
      },
    ],
  },
  {
    path: "/pinia",
    name: "pinia",
    meta: {
      title: "pinia(状态管理)",
      icon: "Menu",
    },
    component: Layout,
    redirect: "/pinia/pinia",
    children: [
      {
        path: "pinia",
        name: "pinia",
        meta: {
          title: "pinia",
          icon: "Setting",
        },
        component: () => import("@/views/pinia/index.vue"),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: "/", redirect: "/home" },
    {
      path: "/login",
      name: "Login",
      component: () => import("@/views/login/index.vue"),
    },
    {
      path: "/404",
      component: () => import("@/views/error/404.vue"),
    },
    ...routes,
  ],
});

// 挂载路由守卫
// router.beforeEach((to, from, next) => {
//   // to and from are both route objects. must call `next`.
//   if (to.path === '/login') return next()
//   const tokenStr = window.sessionStorage.getItem('token')
//   if (!tokenStr) return next('/login')
//   next()
// })
export default router;
